<!doctype html>

<title>00 Object Elements - React From Zero</title>

<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>

<div id="app">
  <!--The render target of our React application-->
</div>

<script>
  // React uses ES2015 Symbols to "tag" its element-objects.
  // It uses a magic number as fallback on older browsers.
  var magicValue = (Symbol && Symbol.for("react.element")) || 0xeac7;

  // React uses virtual DOM elements, which become real DOM elements
  // on a render. A virtual DOM element can be defined as a simple
  // object literal. Normally you would use the React.createElement()
  // to create an element. This is what the return value of a
  // React.createElement() call could look like.
  var reactElement = {
    // This special property will be checked by React to ensure this
    // object
    // is a React element and not just some user data
    // React.createElement() sets it for you
    $$typeof: magicValue,

    // This will also be checked by React. We will be talking about
    // references later, but if you're not using them, this has to be
    // set to null and not undefined
    ref: null,

    // This defines the HTML-tag
    type: "h1",

    // This defines the properties that get passed down to the element
    props: {
      // In this example there is just a single text node as child
      children: "Hello, world!",

      // a CSS class
      className: "abc",

      // styles can be passed as object literals
      // React uses camelCase instead of dashed-case (like CSS/D3 do)
      style: {
        textAlign: "center"
      },

      // event handlers can be added as properties, too
      // React uses synthetic events to try to normalize browser
      // behavior
      onClick: function (notYourRegularEvent) {
        alert("click");
      }
    }
  };

  // another element that doesn"t have much configuration
  var anotherElement = {
    $$typeof: magicValue,
    ref: null,
    type: "p",
    props: {
      children: "A nice text paragraph."
    }
  };

  // React needs a DOM element as render target
  var renderTarget = document.getElementById("app");

  // ReactDOM is responsible for inserting the element into the DOM
  ReactDOM.render(reactElement, renderTarget);
</script>